vuejs2.0 vsCode router前后端分离权限 vueAdmin后台基础模板

感觉不错的开源项目，所以搜集资料来细致的剖析，帮助更多人尽快步入后台系统的开发，其实后台项目有两个最基础最重要的东西就是：权限验证和安全性，关于VSCode是最近很火的编辑器不做过多说明，下面的参考资料有详细讲解

第三方参考资料

1. 手摸手，带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)
2. 导航守卫
3. 请求、响应拦截器
4. me-admin-template开发文档
5. me-admin-template
6. me-admin-template在线预览地址
7. 一代女前辈赛冷思sls-admin-vue在线预览地址
8. 让我启蒙的花裤衩vueAdmin-template在线预览地址

---

根据环境读取配置

• 在项目中新建 config 文件夹
• 添加 index.js 并写入export default require('./_' + process.env.NODE_ENV)
• 根据vue-cli生成的环境变量(根目录config设置)有三个环境:development,testing,production,config 目录结构如下所示

vue-cli 默认只提供了dev和prod两种环境。但其实正真的开发流程可能还会多一个sit或者stage环境，就是所谓的测试环境和预发布环境。所以我们就要简单的修改一下代码。其实很简单就是设置不同的环境变量

"build:prod": "NODE_ENV=production node build/build.js",
"build:sit": "NODE_ENV=sit node build/build.js",

之后在代码里自行判断，想干就干啥

var env = process.env.NODE_ENV 
=== 'production' ? config.build.prodEnv : config.build.sitEnv

建议使用npm install --registry=https://registry.npm.taobao.org安装依赖包使用cnpm install或者update 它的包是一个link，会有各种诡异的bug

---

添加请求、响应拦截器，@/_extends/ui，在_extends中定义公共弹框以及进度条通过index向外提供方法接口

import axios from 'axios'
import _config from '@/_config'
import $ui from '@/_extends/ui'
// import qs from 'qs'

const instance = axios.create({
  baseURL: _config.apiBaseUrl, // api的base_url
  timeout: 10000 // 请求超时时间
  // transformRequest: data => qs.stringify(data)
})
// request拦截器
instance.interceptors.request.use(
  e => {
    e.method = _config.isMockTest ? 'GET' : e.method
    e.url = _config.suffix ? e.url + _config.suffix : e.url
    e.params = e.params || {}
    e.headers = e.headers || {}
    if (localStorage.token) {
      e.headers['Authorization'] = localStorage.token
      //后端会验证每一个涉及请求的操作，验证其是否有该操作的权限，
      //每一个后台的请求不管是 get 还是 post 都会让前端在请求 
      //header里面携带用户的 token，后端会根据该 
      //token 来验证用户是否有权限执行该操作。
    }
    return e
  },
  error => ({ status: 0, msg: error.message })
)
// respone拦截器
instance.interceptors.response.use(
  response => {
    const resp = response.data
    if (resp && resp.status === 0 && resp.msg) {
      $ui.pages.warn(resp.msg)
    }
    if (response.status === 200) {
      return resp
    }
    return response
  },
  error => {
    const err = { status: 0, msg: '服务器异常' }
    if (
      error.message &&
      (error.message.indexOf('403') > -1 || error.message.indexOf('401') > -1)
    ) {
      err.msg = '权限校验失败，请重新登录'
    }
    $ui.pages.warn(err.msg)
    console.log('err' + error) // for debug
    return Promise.reject(err)
  }
)

export default instance

用户登录成功之后，我们会在全局钩子router.beforeEach中拦截路由，判断是否已获得token，在获得token之后我们就要去获取用户的基本信息了

• 登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后（我会将这个token存贮到cookie中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息（如用户权限，用户名等等信息）
• 权限验证：通过token获取用户对应的 role，动态根据用户的 role 算出其对应有权限的路由，通过 router.addRoutes 动态挂载这些路由
• 两步验证：其实就是账号密码验证之后绑定第三方平台，登陆成功后不重定向到首页而是弹出第三方平台登陆窗口

scrollBehavior，前端路由切换新路由想要页面滚动到顶部

import Vue from 'vue'
import Router from 'vue-router'
import { routes } from './routes'
import logic from './logic'
Vue.use(Router)

const router = new Router({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) return savedPosition
    const position = {}
    if (to.hash) {
      position.selector = to.hash
    }
    position.x = 0
    position.y = 0
    return position
  },
  routes
})
router.beforeEach(logic.beforeEach)
router.afterEach(logic.afterEach)

export default router

前端后端 控制权限

• 后端的确也是有权限验证的，但它的验证其实是针对业务来划分的，比如超级编辑可以发布文章，而实习编辑只能编辑文章不能发布，但对于前端来说不管是超级编辑还是实习编辑都是有权限进入文章编辑页面的。
• 还在更新中。。。